{% extends "projects/base_project.html" %}

{% load core_tags i18n highlight  %}

{% block title %}{% blocktrans with query=query|default:"" %}Search: {{ query }} {% endblocktrans %}{% endblock %}

{% block project_editing %}
    {% with search_active="active" %}
        {% include "core/project_bar.html" %}
    {% endwith %}
{% endblock %}

{% block extra_scripts %}
<script type="text/javascript">

$(document).ready(function() {
    input_div = $('#id_elastic_project_search')

    $('#id_elastic_project_search').autocomplete({
    source: '{% url "file_autocomplete" project.slug %}',
    minLength: 2,
    open: function(event, ui) {
      ac_top = $('.ui-autocomplete').css('top');
      input_width = parseInt(input_div.css('width'))
      input_padding = parseInt(input_div.css('padding')) 
      $('.ui-autocomplete').css({'cursor': 'pointer', 'width': input_width, 'padding': input_padding, 'top': ac_top + 10 });
    },
    select: function( event, ui ) {
      event.preventDefault()
      window.location.replace('/docs/' + '{{ project.slug }}' + '/en/latest/' + ui.item.value)
    }
    });

})
</script>


{% endblock %}

{% block content %}

<!--
<div class="navigable">
<ul>
  <h5>Content</h5>
    <li class="active">Projects</li>
    <li>Users</li>
    <li>Files</li>

  <h5>Language</h5>
    <li class="active">English</li>
    <li>Spanish</li>

  <h5>Tag</h5>
    <input name="tag">

</ul>
-->
  <div>
        <h2 class="quiet">Search in this project:</h2>
        <!-- BEGIN search form -->
        <div class="wide-search-bar">
          <div class="wide-search-bar-wrapper clearfix">
            <form action="." method="GET">
              <div class="text-input-wrapper">
                <input type="text" name="q" value="{{ query|default_if_none:"" }}" id="id_elastic_project_search">
              </div>
              <div class="submit-input-wrapper">
                {% comment %}Translators: This is about starting a search{% endcomment %}
                <input type="submit" value="{% trans "Go crazy." %}">
              </div>
            </form>
          </div>
        </div>
        <!-- END search form -->


        {% if query %}
        <!-- BEGIN search results -->
        <div class="module">
          <div class="module-wrapper">

            <div class="module-header">
              <h3>{% blocktrans with query=query|default:"" %}Results for {{ query }}{% endblocktrans %}</h3>
            </div>

            <div class="module-list">
              <div class="module-list-wrapper">

                <ul>
                  {% for result in results.hits.hits %}
                        <li class="module-item">
                          <p class="module-item-title">
                            <a href="{% doc_url project result.fields.version result.fields.path %}?highlight={{ query }}">{{ result.fields.project }} - {{ result.fields.title|safe }}</a>
                          </p>
                          <p>
                            {{ result.highlight.content.0|safe }}
                          </p>
                        </li>
                  {% empty %}
                    <li class="module-item"><span class="quiet">{% trans "No results found. Bummer." %}</span></li>
                  {% endfor %}

                </ul>

              </div>
            </div>

          </div>
        </div>
        <!-- END search results -->

          {% if page.has_previous or page.has_next %}
          <!-- BEGIN search pagination -->
          <div class="pagination">
            {% if page.has_previous %}
              <a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">&laquo; {% trans "Previous" %}</a>
            {% else %}
              <span class="disabled">&laquo; {% trans "Previous" %}</span>
            {% endif %}

            {% if page.has_next %}
              <a class="next" href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% trans "Next" %} &raquo;</a>
            {% else %}
              <span class="next disabled">{% trans "Next" %} &raquo;</span>
            {% endif %}
          </div>
          <!-- END search pagination -->
          {% endif %}

        {% else %}
          {# Show some example queries to run, maybe query syntax, something else? #}
        {% endif %}

  </div>
</div>
{% endblock %}
